<template>
  <div class="config-wrapper">
    <div class="config-inner">
      <h2 class="config-title">支付渠道</h2>
      <Table
        border
        :columns="payColumns"
        :row-class-name="rowClassName"
        :data="payList"
        :loading="payLoading">
      </Table>
    </div>

    <weight-modal
      v-model="modal"
      :wdata="wdata"
      @ok="handleWeightOk"
    ></weight-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { repayChannel } from '@/static/constant';
  import { dateFormat, thousandsFormat, isEmpty } from '@/static/tools';
  import weightModal from './components/dialog-weight.vue';

  export default {
    name: 'payConfig',
    data () {
      return {
        payList: [],
        payColumns: [
          { title: '客户号', key: 'customerNo', align: 'center' },
          { 
            title: '支付渠道',
            align: 'center',
            render: (h, params) => {
              const { channelNo } = params.row;
              return h('span', repayChannel[channelNo]);
            }
          },
          {
            title: '可用代付余额',
            key: 'withdrawBalance',
            align: 'center',
            render: (h, params) => {
              const { withdrawBalance } = params.row;
              let value = isEmpty(withdrawBalance) ? '' : thousandsFormat(withdrawBalance);
              return h('span', value);
            }
          },
          { 
            title: '余额',
            align: 'center',
            render: (h, params) => {
              const { balance } = params.row;
              let value = isEmpty(balance) ? '' : thousandsFormat(balance);
              return h('span', value);
            }
          },
          { title: '权重', key: 'weight', align: 'center' },
          { 
            title: '是否锁定',
            key: 'isLock',
            align: 'center',
            render: (h, params) => {
              const { isLock } = params.row;
              return h('span', isLock == 0 ? '未锁定' : '已锁定');
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const { index, row } = params;
              const  { isLock, channelNo } = row;
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleWeight(this.payList[index]);
                    }
                  }
                }, '权重修改'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: `你确定要${isLock == 0 ? '锁定' : '解锁'}该支付渠道吗？`,
                    placement: 'left',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.handleIsLock(isLock, channelNo);
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginLeft: '10px'
                    }
                  }, row.isLock == 0 ? '锁定' : '解锁')
                ])
              ]);
            }
          }
        ],
        payLoading: true,
        modal: false,
        wdata: {} // 选中支付渠道的数据
      }
    },
    created () {
      this.getPayChannelList();
    },
    computed: {
      ...mapGetters([
        'type'
      ])
    },
    methods: {
      rowClassName(row, index) {
        const { isLock } = row;
        if (isLock == 1) return 'ivu-table-islocked';
      },
      //获取支付渠道列表
      getPayChannelList() {
        this.payLoading = true;
        this.$http.get('/helsinki/admin/finance/getPayChannelList')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.payList = data;
          }
          this.payLoading = false;
        }, err => {});
      },
      // 点击修改权重
      handleWeight(data) {
        this.wdata = {
          channelNo: data.channelNo,
          customerNo: data.customerNo,
          weight: data.weight
        };

        this.modal = true;
      },
      // 修改权重成功回调函数
      handleWeightOk() {
        this.modal = false;
        this.getPayChannelList();
      },
      handleIsLock(status, no) {
        this.$http.post('/helsinki/admin/finance/setDefaultPayChannel', {
          type: status == 0 ? 0 : 1,
          channelNo: no
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.$Message.success(`${status == 0 ? '锁定' : '解锁'}成功`);
            this.getPayChannelList();
          }
        }, err => {});
      }
    },
    components: {
      weightModal
    }
  }
</script>

<style lang="scss" socped>
  
  .config-wrapper {
    position: relative;
    .config-inner {
      padding: 0 15px 15px;;
    }
    .config-title {
      color: #515a6e;
      font-size: 16px;
      font-weight: bold;
      line-height: 74px;
    }
  }
</style>

